/* vue */
import { defineComponent, toRefs, ref,reactive, watch, PropType, toRef, computed } from "vue";
/* scss */
import './style.scss';
/* util */
import {i18n, t} from '@src/locales';
/* entity */
import Field from '@model/entity/Field';
/* scss */
import './style.scss';

export default defineComponent({
  name:'cm-editor',
  props: {
    canInsertedFields: {
      type: Array as PropType<Field[]>,
      default: () => ([])
    },
    code: {
      type: String,
      default: () => ('')
    }
  },
  setup(props,{emit,expose}){
    const newCode = ref('');
    const insertFields = ref([] as any);
    /** 修改代码数据 */
    // const handleCodemirrorChange = (value: any) => {
    //   console.log('value',newCode.value, insertFields.value);
    //   emit('handleCodemirrorChange', newCode.value, insertFields.value);
    // };

    return {
      newCode,
      insertFields,
    };
  },
  methods: {
    /*** 插入字段 */
    handleInsertField(value: Field) {
      console.log("value",value);

      // 插入的表单字段(去重)
      if(this.insertFields.length == 0 || this.insertFields.some((item: Field)=>item.fieldName != value.fieldName)){
        this.insertFields.push(value);
      }

      const content = `form[qf_field('${value.displayName}$${value.fieldName}$')]`;
      // const dom = document.createElement("span");
      // dom.className = "cm-field insert-field-tag mg-0";
      // dom.setAttribute('data-id', value.fieldName);
      // if (!content) return;
      // dom.innerHTML = content;

      // const endPos = { line: insertPos.line, ch: insertPos.ch + content.length };
      this.$emit('handleField',content);

      //再对插入字符串进行标签制定（其实就是在codemirror中动态添加标签）
      // codemirror.markText(insertPos, endPos, {
      //   replacedWith: dom
      // });
    }
  },
  render() {
    return (
      <section class="code-editing-wrap">
        <section class="code-editing-wrap-header">
          <section class="code-editing-wrap-header-title">
            <i class="iconfont icon-fdn-jsCodeBlock" style={{fontSize:'18px',marginTop:'10px'}}></i>
            <p>{t('common.form.tip.jsCodeBlock.paramsList')}</p>
          </section>
          <p>{t('common.form.tip.jsCodeBlock.addParam')}</p>
        </section>
        <nav>
          <ul>
            {this.canInsertedFields.map((item: Field, index: number) => (
              <li key={item.fieldName} onClick={()=> this.handleInsertField(item)}>
                {item.displayName}
              </li>
            ))}
          </ul>
        </nav>
      </section>
    );
  }
});
